<template>
  <div class="login-dv">
    这是登录页面count:{{count}} num: {{num}}
    <async-com>
      <!-- <template #name1>
        <div>123</div>
      </template>
       <template #name2>
          <div>456</div>
      </template> -->
    </async-com>
    <button @click="btn3">增加</button>
    <div class="cover-dv">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

</template>

<script setup lang='ts'>
import { defineAsyncComponent } from 'vue'
import { useRouter } from "vue-router";
import {loginStore} from '@/store/login';
import { storeToRefs } from 'pinia'
const AsyncCom = defineAsyncComponent(() => import('@/components/register/Register.vue'))
console.log(useRouter().getRoutes(),333888)
const _loginstore = loginStore()
const {count} = storeToRefs(_loginstore)
const {num} = storeToRefs(_loginstore)
const msg1 = ref(0)
const themeColor = ref('green')
const btn3 = (val: any) => {
  console.log(val, '>>>')
  msg1.value++
  themeColor.value = 'red'
}
provide('loginMsg', { msg1: msg1, btn3: btn3, themeColor: themeColor})
</script>
<script lang='ts'>
import {
  defineComponent, provide, reactive, ref
} from 'vue';
export default defineComponent({
  name: 'Login',
})
</script>

<style scoped lang='scss'>
.login-dv {
  width: 100%;
  height: 100vh;
  background: url('@/assets/baby-2.jpg') no-repeat;
  background-size: cover;

  .cover-dv {
    width: 300px;
    height: 200px;
    background-color: #fff;
    opacity: 0.7;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(25px);

    ul {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      justify-content: flex-end;
      li {
        flex: 0 1 22%;
        // width: 20.3%;
        // height: 100%;
        list-style: none;
        &:nth-child(1) {
          background-color: blue;
        }

        &:nth-child(2) {
          background-color: rgb(47, 255, 0);
        }

        &:nth-child(3) {
          background-color: rgb(255, 0, 247);
        }
      }
    }
  }
}
</style>